<template>
	<view>
		<view class="cu-bar bg-white search">
			<view class="search-form round searchBorder" >
				<text class="cuIcon-search text-gray" style="font-size: 36rpx;margin-left: 18rpx !important;"></text>
				<input  aria-role="searchbox" @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索服务、通知"
				 confirm-type="search"></input>
			</view>
			<view class="action">
				<button aria-role="button" class="cu-btn bg-white round" style="font-size: 34rpx;">搜索</button>
			</view>
		</view>
		<view class="bg-white padding-bottom">
			<view aria-role="tab" class="text-sm text-gray padding-sm">
				<text>热门搜索</text>
			</view>
			<view class="cu-list menu">
				<view aria-role="link" aria-label="第1条热门搜索 残疾基金" class="cu-item">
					<view class="content">
						<text class="textTop bg-red text-center text-sm">1</text>
						<text class="text-df">残疾基金</text>
					</view>
				</view>
				<view aria-role="link" aria-label="第2条热门搜索 生活补贴申请流程" class="cu-item">
					<view class="content">
						<text class="textTop bg-orange text-center text-sm">2</text>
						<text class="text-df">生活补贴申请流程</text>
					</view>
				</view>
				<view aria-role="link" aria-label="第3条热门搜索 春季招聘会" class="cu-item">
					<view class="content">
						<text class="textTop bg-yellow text-center text-white text-sm">3</text>
						<text class="text-df">春季招聘会</text>
					</view>
				</view>
				<view aria-role="link" aria-label="第4条热门搜索 社区活动站" class="cu-item">
					<view class="content">
						<text class="textTop text-center text-sm">4</text>
						<text class="text-df">社区活动站</text>
					</view>
				</view>
				<view aria-role="link" aria-label="第5条热门搜索 就学补贴" class="cu-item">
					<view class="content">
						<text class="textTop text-center text-sm">5</text>
						<text class="text-df">就学补贴</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="parting"></view> -->
		<view class="bg-white">			<view aria-role="tab" class="text-sm text-gray padding-top-sm padding-left-sm padding-right-sm">				<text>搜索历史</text>			</view>
			<view class="action margin-left-sm" style="min-height: 300rpx;">
				<button aria-role="link" aria-label="第1条搜索历史 生活补贴申请流程" class="cu-btn round margin-top margin-right-sm">生活补贴申请流程</button>
				<button aria-role="link" aria-label="第2条搜索历史 社区活动站" class="cu-btn round margin-top margin-right-sm">社区活动站</button>
				<button aria-role="link" aria-label="第3条搜索历史 出行" class="cu-btn round margin-top margin-right-sm">出行</button>
				<button aria-role="link" aria-label="第4条搜索历史 社区服务队伍" class="cu-btn round margin-top margin-right-sm">社区服务队伍</button>
				<button aria-role="link" aria-label="第5条搜索历史 春季招聘会" class="cu-btn round margin-top margin-right-sm">春季招聘会</button>
				<button aria-role="link" aria-label="第6条搜索历史 滴滴" class="cu-btn round margin-top margin-right-sm">滴滴</button>
				<button aria-role="link" aria-label="第7条搜索历史 社区活动站" class="cu-btn round margin-top margin-right-sm">社区活动站</button>
				<button aria-role="link" aria-label="第8条搜索历史 就学补贴" class="cu-btn round margin-top margin-right-sm">就学补贴</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		onLoad: function() {

		},
		methods: {
			InputFocus() {
				console.log('focus')
			},
			InputBlur() {
				console.log('blur')
			}
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
	.action>.cu-btn{
		color: #888888 !important;
	}
	.parting{
		height: 20rpx;
		background-color: #f4f5f6;
		width: 100%;
	}
	.searchBorder{
		border: 1px solid #ccc;
		
	}
	.textTop{
		line-height: 32rpx;
		height: 32rpx;
		width: 32rpx;
		border-radius: 8rpx;
		display:inline-block;
		margin-right: 24rpx;
	}
	.cu-list.menu>.cu-item {
		min-height:70rpx
	}
	.cu-bar .search-form+.action{
		margin-right: 0rpx !important;
	}
	.cu-bar .search-form{
		background-color: #FFF;
		margin-left: 20rpx !important;
		margin-right: 0 !important;
	}
	.cu-list.menu>.cu-item:after{
		border-bottom: 0 !important;
	}
</style>
